import { defineComponent, onMounted, type PropType, ref, toRefs } from 'vue'
import { Button, Card, Col, Form, FormItem, Input, InputNumber, Row, Select, Textarea } from 'ant-design-vue'
import { useDetail } from './use-detail'
import { useForm } from './use-form'
import { BusinessPageTypeEnum } from '@/enums/pageTypeEnum'
import { sheLfEnum } from '@/views/base/product/data'

const DataDetail = defineComponent({
  name: 'DataDetail',
  props: {
    code: {
      type: [String, Number],
      required: false
    },
    businessType: {
      type: String as PropType<BusinessPageTypeEnum>,
      required: true,
      validator: (value: string) => {
        // 检查传入的值是否在枚举的有效值中
        return Object.values(BusinessPageTypeEnum).includes(value as BusinessPageTypeEnum)
      }
    }
  },
  emits: ['cancelModal', 'confirmModal'],
  setup(props, ctx) {
    const { meta, state, initForm, getFormValues } = useForm()
    const { status, createOrUpdate, getDataById, getBrandOptions } = useDetail(getFormValues)
    const brandOptionData = ref<any[]>([])
    const handleCommit = async () => {
      await createOrUpdate()
      initForm()
      ctx.emit('confirmModal')
    }

    const resetForm = () => {
      initForm()
      ctx.emit('cancelModal')
    }

    const fetchData = async () => {
      if (props.businessType === BusinessPageTypeEnum.UPDATE || props.businessType === BusinessPageTypeEnum.DETAIL) {
        // 查询值
        state.detailForm = await getDataById(props.code)
      }
    }

    onMounted(async () => {
      await fetchData()
      brandOptionData.value = await getBrandOptions()
    })

    return {
      ...toRefs(props),
      ...toRefs(state),
      ...toRefs(status),
      ...toRefs(meta),
      brandOptionData,
      handleCommit,
      resetForm
    }
  },

  render() {
    const { businessType, detailForm, rules, brandOptionData, handleCommit, resetForm } = this
    return (
      <>
        <Card>
          <Form
            ref='detailFormRef'
            model={detailForm}
            rules={rules}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 14 }}
            onFinish={handleCommit}
          >
            <Row>
              <Col span={8}>
                <FormItem label='产品名称' name='name'>
                  <Input
                    disabled={businessType === BusinessPageTypeEnum.DETAIL}
                    v-model={[detailForm.name, 'value']}
                    showCount
                    maxlength={30}
                    placeholder='请输入产品名称'
                  />
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='产品编码' name='productCode'>
                  <Input
                    disabled={businessType === BusinessPageTypeEnum.DETAIL}
                    v-model={[detailForm.productUniqueCode, 'value']}
                    showCount
                    maxlength={30}
                    placeholder='请输入产品编码'
                  />
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='品牌方' name='manager'>
                  <Select
                    disabled={businessType === BusinessPageTypeEnum.DETAIL}
                    v-model={[detailForm.brandProviderCode, 'value']}
                    options={brandOptionData}
                  />
                </FormItem>
              </Col>
            </Row>

            <Row>
              <Col span={8}>
                <FormItem label='产品规格' name='productSpecification'>
                  <InputNumber
                    disabled={businessType === BusinessPageTypeEnum.DETAIL}
                    v-model={[detailForm.specificationNumber, 'value']}
                    placeholder='请输入产品规格'
                  />
                </FormItem>
                <FormItem label='产品规格单位' name='productUnitCode'>
                  <Input
                    v-model={[detailForm.specificationName, 'value']}
                    disabled={businessType === BusinessPageTypeEnum.DETAIL}
                    placeholder='请输入产品规格单位'
                  />
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='包装规格' name='packingSpecification'>
                  <InputNumber
                    disabled={
                      businessType === BusinessPageTypeEnum.DETAIL || businessType === BusinessPageTypeEnum.UPDATE
                    }
                    v-model={[detailForm.packingNumber, 'value']}
                    placeholder='请输入包装规格'
                  />
                </FormItem>
                <FormItem label='包装规格单位' name='productUnitCode'>
                  <Input
                    disabled={businessType === BusinessPageTypeEnum.DETAIL}
                    v-model={[detailForm.packingName, 'value']}
                    placeholder='请输入产品规格单位'
                  />
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='保质期' name='shelfLife'>
                  <InputNumber
                    disabled={businessType === BusinessPageTypeEnum.DETAIL}
                    v-model={[detailForm.shelfLife, 'value']}
                    showCount
                    maxlength={30}
                    placeholder='请输入保质期'
                    addonAfter={
                      <Select
                        dropdownStyle={{ width: '80px' }}
                        dropdownMatchSelectWidth={false}
                        disabled={businessType === BusinessPageTypeEnum.DETAIL}
                        v-model={[detailForm.shelfLifeUnit, 'value']}
                        options={sheLfEnum}
                      />
                    }
                  />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <FormItem label='原厂价' name='purchasingPrice' tooltip={'品牌方订单显示价格'}>
                  <InputNumber
                    disabled={businessType === BusinessPageTypeEnum.DETAIL}
                    v-model={[detailForm.originalPrice, 'value']}
                    min={0}
                    maxlength={30}
                    placeholder='请输入进货价'
                    prefix='￥'
                    addonAfter='元'
                    style={{ width: '100%' }}
                  />
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='开票价' name='supplyPrice' tooltip={'最小销售单元的供货价格'}>
                  <InputNumber
                    disabled={businessType === BusinessPageTypeEnum.DETAIL}
                    v-model={[detailForm.supplyPrice, 'value']}
                    min={0}
                    maxlength={30}
                    placeholder='请输入供货价'
                    prefix='￥'
                    addonAfter='元'
                    style={{ width: '100%' }}
                  />
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='进货价' name='purchasingPrice' tooltip={'实际下单价格'}>
                  <InputNumber
                    disabled={businessType === BusinessPageTypeEnum.DETAIL}
                    v-model={[detailForm.actualPrice, 'value']}
                    min={0}
                    maxlength={30}
                    placeholder='请输入进货价'
                    prefix='￥'
                    addonAfter='元'
                    style={{ width: '100%' }}
                  />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={16}>
                <FormItem label='产品厂家全称' name='fullName'>
                  <Input
                    disabled={businessType === BusinessPageTypeEnum.DETAIL}
                    v-model={[detailForm.fullName, 'value']}
                    showCount
                    maxlength={30}
                    placeholder='请输入产品厂家全称名称'
                  />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={16}>
                <FormItem label='备注' name='description' labelCol={{ span: 2 }} wrapperCol={{ span: 18 }}>
                  <Textarea
                    disabled={businessType === BusinessPageTypeEnum.DETAIL}
                    v-model={[detailForm.description, 'value']}
                    maxlength={200}
                    rows={3}
                    placeholder='请输入'
                  />
                </FormItem>
              </Col>
            </Row>

            <FormItem wrapperCol={{ span: 12, offset: 12 }}>
              {businessType === BusinessPageTypeEnum.DETAIL && <Button onClick={resetForm}>返回</Button>}
              {businessType !== BusinessPageTypeEnum.DETAIL && (
                <>
                  <Button type='primary' htmlType='submit'>
                    提交
                  </Button>
                  <Button style={{ marginLeft: '12px' }} onClick={resetForm}>
                    取消
                  </Button>
                </>
              )}
            </FormItem>
          </Form>
        </Card>
      </>
    )
  }
})
export default DataDetail
